<template>
  <div>
    <!-- 购物车 -->
    <div v-if="!store.state.info.length">
      <van-empty description="购物车快饿瘪了T.T">
        <van-button @click="goHome" round type="danger" class="bottom-button"
          >去逛逛</van-button
        >
      </van-empty>
    </div>

    <van-cell-group v-else inset>
      <van-cell>
        <van-cell title="购物车" value="编辑" />
        <van-swipe-cell v-for="item in store.state.info" :key="item.id">
          <div class="box">
            <van-checkbox @click="changeNum" v-model="item.flag" />
            <van-card
              :price="item.price"
              :title="item.name"
              class="goods-card"
              :thumb="item.pic"
            >
              <template #num>
                <van-stepper @change="changeNum" v-model="item.num" />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="del(item.id)"
            />
          </template>
        </van-swipe-cell>
      </van-cell>
    </van-cell-group>
    <van-submit-bar
      class="box1"
      :price="store.getters.total"
      button-text="提交订单"
    >
      <van-checkbox @click="checkAllBtn" v-model="checked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script setup>
// 引入路由
import { useRouter } from "vue-router";
// 引入vuex
import { useStore } from "vuex";
// 引入ref
import { ref, onMounted } from "vue";
let router = useRouter();
let store = useStore();

// // 是否全选
let checked = ref(true);

let goHome = () => {
  router.push("/home");
};

let changeNum = () => {
  checked.value = store.getters.checkAll;
  localStorage.info = JSON.stringify(store.state.info);
};

// 页面刷新改变全选状态
onMounted(() => {
  checked.value = store.getters.checkAll;
});

// 全选
let checkAllBtn = () => {
  store.commit("checkAll", checked);
};

// 删除
let del = (id) => {
  store.commit("del", id);
};
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.box {
  display: flex;
  /* justify-content: space-between; */
}
.box1 {
  margin-block: 50px;
}
/* .van-card {
  width: 290px;
} */
.bottom-button {
  width: 160px;
  height: 40px;
}
.goods-card {
  width: 291px;
}

.van-cell /deep/ .van-cell__title {
  text-align: left;
}

.goods-card /deep/ .van-multi-ellipsis--l2 {
  width: 50px !important;
  text-align: left;
}
.goods-card /deep/.van-card__desc {
  width: 50px !important;
}
.goods-card /deep/.van-card__num {
  display: inline-block !important;
  text-align: right !important;
  width: 130px !important;
}
</style>